<template>
    <div class="menuTab">
        <div class="menu_content">
            <div class="sideList">
                <!-- <div class="slideList_item slideList_item_selected" id="category-0">
                    <div class="slideList_itemImage"><img src="@/assets/img/icon/slide-hot.png" alt=""></div>
                    <span class="slideList_item_text slideList_item_textBold">热销</span>
                    <span class="slideList-bottom-white-border"></span>
                </div>
                <div class="slideList_item" id="category-0">
                    <span class="slideList_item_text">烤肉饭系列</span>
                </div>
                <div class="slideList_item" id="category-0">
                    <span class="slideList_item_text">加料区(单点不送)</span>
                </div> -->
                <van-sidebar v-model="tabActive">
                    <van-sidebar-item :tabindex="index" :title="item.title" :badge="item.total?item.total:null" v-for="(item,index) in menuList" :key="index" @click="handleSlideList(index)"/>
                </van-sidebar>

            </div>
            <div class="mainList" id="goodListId">
                <div class="mainList_item" v-for="(item,index1) in menuList" :key="index1" :id="'scroll'+index1">
                        <div class="mainList_item_name">{{item.title}}</div>
                        <div class="menuItem" v-for="(food,index2) in item.detail" :key="index2">
                            <div class="menuItem_image">
                                <div class="img"><img :src="food.foodImgSrc" alt=""></div>
                            </div>
                            <div class="menuItem_info">
                                <div class="menuItem_info_top">
                                    <div class="menuItem_info_title_wrap">
                                        <span class="menuItem_info_title">{{food.foodName}}</span>
                                    </div>
                                    <div class="menuItem_info_desc_wrap">
                                        <span class="menuItem_info_desc">{{food.foodDesc}}</span>
                                    </div>
                                    <div class="menuItem_info_sale">月售{{food.foodSaleMonth}}</div>
                                </div>
                                <div class="menuItem_info_bottom">
                                    <div class="menuItem_info_price">
                                        <span class="menuItem_info_dollar">¥</span>
                                        <span class="menuItem_info_price_text">{{food.foodPrice}}</span>
                                    </div>
                                    <div class="shop_minus_num_plus">
                                        <template v-if="food.specifications.length">
                                            <div class="btn_select_spec" :id="food._id">选规格</div>
                                        </template>
                                        <template v-else>
                                            <van-stepper 
                                                v-model="food.num" 
                                                theme="round" 
                                                button-size="22" 
                                                disable-input 
                                                min="0"
                                                :show-minus="(food.num > 0)"
                                                :show-input="(food.num > 0)"
                                                @change="changeCart(food.num,food,index1,index2)"
                                            />
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, toRefs, ref, reactive, computed, onBeforeUpdate } from 'vue';
import { getMenu } from '@/api/shopDetail';
import { useRouter } from 'vue-router';
export default {
    name:'MenuTab',
    setup(props,context){
        const router = useRouter();

        const data = reactive({
            menuList:[]
        })
        const { menuList } = toRefs(data);
        const getMenuReq = () => {
            getMenu({id:props.shop_id}).then(res=>{
                console.log(res)
                menuList.value = res.data;
                for(let i = 0; i<res.data.length; i++){
                    for(let j = 0; j<res.data[i].detail.length; j++){
                        menuList.value[i].detail[j].foodImgSrc = require('@/assets/img/shop_detail/food/'+res.data[i].detail[j].foodImgSrc)
                        menuList.value[i].detail[j].num = 0;
                        menuList.value[i].detail[j].showStepper = false;
                    }
                }
            }).catch(error=>{
                console.log(error);
            })
        }
        onMounted(()=>{
            // 监听滚动条位置
            window.addEventListener('scroll',handleScroll,true);

            // 发送请求
            getMenuReq();
        })
        
        // 当前侧边导航的值
        const tabActive = ref(0);
        // 滚动事件
        const handleScroll = () => {
            // if(document.querySelector('.menuTab').getBoundingClientRect().top<=88){
            //     document.querySelector('.menuTab').style.height = window.innerHeight - 86 + 'px';
            // }
            // else{
            //     document.querySelector('.menuTab').style.height = 'auto'
            // }
            //scrollTop从0开始增大，局限在#goodListId div内
            let scrollTop = document.querySelector("#goodListId").scrollTop
            console.log(document.documentElement.scrollTop);
            for(let a = 0;a<menuList.value.length;a++){
                // console.log(document.querySelector('#scroll' + a).offsetTop,scrollTop);
                if(document.querySelector('#scroll' + a).offsetTop  < scrollTop+120 ){
                    tabActive.value = a
                }
            }
        }
        // 侧边导航栏的点击事件
        const handleSlideList = (index) => {
            document.documentElement.scrollTop = 211.1999969482422;
            tabActive.value = index;
            let navPage = document.querySelector('#scroll'+index);
            // navPage.offsetTop需要减去165店铺头部所占高度，需<170否则菜单切换会回弹
            document.querySelector("#goodListId").scrollTop = navPage.offsetTop
        }

        // 是否显示步进器
        const showStepper = ref(false);
        const changeCart = (val,food,type_index,food_index) => {
            // console.log(val,food,type_index,food_index);
            // menuList.value[type_index].detail[food_index].num = val;
            if(localStorage.getItem('userId')){
                    
                food.num = val;
                for(let i = 0; i<menuList.value.length; i++){
                    let total = 0;
                    for(let j = 0; j<menuList.value[i].detail.length; j++){
                        total += menuList.value[i].detail[j].num;
                    }
                    menuList.value[i].total = total;
                }
                // console.log(menuList.value)

                // 发送请求存 购物车
                context.emit('cart-change',val,food,type_index,food_index);

                // context到shopDetail页面 数量和id
                // shopDetail判断数量
                // 如果数量 == 0 发送请求删除数据
                // 如果数量 >0 价格计算 是否符合结算要求（满减等..满10元起送....）

            }
            else{
                router.push('/login')
            }
        }
        return {
            tabActive,
            menuList,
            handleSlideList,
            showStepper,
            changeCart
        }
    },
    props:['shop_id','menuTypeCount']
}
</script>

<style>
.menuTab{overflow: hidden;overflow-y: scroll;min-height: 757px;}
.menu_content{
    display: flex;
    width: 100%;
    background: #f2f2f2;
    height: calc(100vh - 88px);
    padding-bottom: 80px;
    box-sizing: border-box;
}
.sideList{
    position: sticky;
    width: 4.625rem;
    z-index: 1;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
}
.slideList_item{
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    font-size: 0.75rem;
    min-height: 2.75rem;
    color: #666;
    padding: 0.875rem;
    box-sizing: border-box;
}
.slideList_item_selected{background: #fff;}
.slideList_itemImage{flex-shrink: 0;width: 0.75rem;height: 0.75rem;margin-right: 0.375rem;}
.slideList_itemImage img{width: 100%;height: 100%;}
.slideList_item_text{
    max-height: 4.875rem;
    line-height: 0.9375rem;
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    word-wrap: break-word;
}
.slideList_item_textBold{color: #191919;font-weight: bold;}
.slideList-bottom-white-border{
    content: '';
    position: absolute;
    z-index: 1;
    width: 0.5rem;
    height: 0.5rem;
    right: 0;
    bottom: -0.5rem;
    background-image: radial-gradient(1rem at left bottom,transparent 50%,#fff 50%);
}
/* 选中标签标识 */
.van-sidebar-item--select:before {background: rgb(2, 182, 253);}

.mainList{width: 18.75rem;background: #fff;overflow: auto;}
.mainList_item{position: relative;padding: 0.3125rem 0 0.3125rem 0.75rem;}
.mainList_item_name{
    position: sticky;
    display: flex;
    flex: 1;
    align-items: center;
    margin-left: -0.3125rem;
    padding-left: 0.3125rem;
    color: #191919;
    background: #fff;
    line-height: 2.5rem;
    font-weight: bolder;
    z-index: 4;
}
.menuItem{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5625rem 0;
    padding-right: 0.75rem;
    min-height: 6.125rem;
}
.menuItem_image{position: relative;width: 40%;}
.menuItem_image .img{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: 0.375rem;
}
.menuItem_image .img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.menuItem_info{
    box-sizing: border-box;
    margin-left: 0.5rem;
    min-height: 6rem;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.menuItem_info_top{display: flex;flex-direction: column;}
.menuItem_info_title_wrap{display: flex;justify-content: flex-start;flex-wrap: nowrap;align-items: flex-start;}
.menuItem_info_title{
    font-size: 0.875rem;
    color: #191919;
    font-weight: bolder;
    line-height: 1.25rem;
    max-height: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.menuItem_info_desc_wrap span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: rgba(0, 0, 0, 0.5);
}
.menuItem_info_desc_wrap{display: flex;flex-wrap: wrap;align-items: center;}
.menuItem_info_sale{
    height: 1rem;
    margin-top: 0.25rem;
    line-height: 1rem;
    font-size: 0.6875rem;
    color: #999;
}
.menuItem_info_bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 0.25rem;
}
.menuItem_info_price{
    width: 100%;
    display: flex;
    align-items: flex-end;
    min-height: 1rem;
    color: rgb(255, 75, 51);
}
.menuItem_info_dollar{font-size: 0.6875rem;margin-right: 0.0625rem;font-weight: 500;}
.menuItem_info_price_text{font-size: 1rem;line-height: 1rem;font-weight: 500;}
.shop_minus_num_plus{flex-shrink: 0;}
.btn_select_spec{
    box-sizing: border-box;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    border-radius: 0.875rem;
    background: rgb(2, 182, 253);
}
.btn_plus{
    width: 22px;
    height: 22px;
    background: rgb(2, 182, 253);
    background-image: url('@/assets/img/icon/btn_plus.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

:root{
    --van-stepper-button-round-theme-color: rgb(2, 182, 253);
}
</style>